<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_弹性布局入门</title>
    <style>
      .container {
        width: 500px;
        background-color: lightpink;
        display: flex;
        flex-direction: column;/* 主轴的模式:列模式 竖着排*/
        flex-direction: row-reverse; /* 行模式反转 321 */
        flex-direction: column-reverse; /* 列模式反转 321 */
        flex-direction: row;/* 主轴的模式:行模式 横着排*/

        flex-wrap: nowrap; /* 父容器空间不足,默认不会换行,会压缩子元素的大小 */
        flex-wrap: wrap;/* 设置可以换行 */
      }
      .item {
        background-color: lightgreen;
        border: 3px solid green;
        width: 100px;
        height: 100px;
      }
    </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
  </div>
</body>
</html>